﻿<%@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" %>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
    主页
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <script type="text/javascript">
        var timer;
        $(function () {
            $("#StartAjax").click(function () {
                timer = setInterval(onMonitor, 2000);
            });
            $("#EndAjax").click(function () {
                if (timer) {
                    clearInterval(timer);
                }
            });
        });

        var execCount = 0;
        function onMonitor() {
            $.ajax({
                url: '<%= this.Url.Action("GetCurrentData") %>',
                type: "POST",
                dataType: "json",
                data: { ZoneId: "hangzhou_001" },
                cache: false,
                error: function (data) {
                    alert("error:" + data);
                },
                success: function (result) {
                    $("#ExecCount").text(++execCount);
                    $("#Temperature").text(result.Temperature);
                    $("#Illumination").text(result.Illumination);
                    $("#Humidity").text(result.Humidity);
                }
            });
        };
    </script>
    <h2>
        <%: ViewData["Message"] %></h2>
    <table>
        <tr>
            <td>
                监测次数
            </td>
            <td style="width:100px">
                <label id="ExecCount">
                </label>
            </td>
        </tr>
        <tr>
            <td>
                温度
            </td>
            <td>
                <label id="Temperature">
                </label>
            </td>
        </tr>
        <tr>
            <td>
                湿度
            </td>
            <td>
                <label id="Humidity">
                </label>
            </td>
        </tr>
        <tr>
            <td>
                光照
            </td>
            <td>
                <label id="Illumination">
                </label>
            </td>
        </tr>
    </table>
    <button id="StartAjax">
        开始</button>
    <button id="EndAjax">
        停止</button>
</asp:Content>
